<template>
	<view class="" style="padding: 40rpx 30rpx 80rpx  30rpx; background-color: #F7F8F9;">
		<view class="address-box" @click="Address">
			<view class="address">
				<view class="address-title" v-if="show">
					添加收货地址
				</view>
				<view class="" v-else>
					<view class="address-name" >
						{{address_info.name}} 
						<view style="margin-left: 20rpx; color: #9A9EA9; font-weight: 400;">
							{{address_info.mobile}}
						</view>
					</view>
					<view class="" style="font-size: 24rpx; color:#9A9EA9">
						{{address_info.region+address_info.address}}
					</view>
				</view>
			</view>
			<text class="iconfont icon-right" style="font-size: 40rpx;" v-if="show"></text>
		</view>
		<scroll-view class="scroll" scroll-y="true">
			<view class="title">
				订单商品
			</view>
			<ShopCarItem  mode="yanhua" v-for="(item,index) in shoplist" :key="index" :Data="item">
				<view class="">
					x{{item.cart_num}}
				</view>
			</ShopCarItem>
		</scroll-view>
		<view class="discount-info">
			<view class="" style="width: 100%;">
				<view class="content">
					<view class="">
						运费
					</view>
					<view class="coupon-box">
						商家包邮
					</view>
				</view>
				<view class="content">
					<view class="">
						发票
					</view>
					<view class="coupon-box" @click="visible=true">
						<view class="payment">
							{{invoiceValue}}
						</view>
						<text class="iconfont icon-right" style="font-size: 40rpx; color: #9A9EA9;"></text>
					</view>
					
				</view>
				<view class="content" v-if="remark==''">
					<view class="" >
						订单备注
					</view>
					<view class="coupon-box" style="color: #9A9EA9;" @click="goRemark">
						<view class="">
							订单有要求请先与商家协商，选填
						</view>
						<text class="iconfont icon-right" style="font-size: 40rpx;"></text>
					</view>
				</view>
				<view class="content" v-else>
					<view class="" >
						订单备注
					</view>
					<view class="coupon-box" style="color: #9A9EA9;" @click="goRemark">
						<view class="">
							{{remark}}
						</view>
						<text class="iconfont icon-right" style="font-size: 40rpx;"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="discount-info">
			<view class="" style="width: 100%;">
				<view class="content">
					<view class="">
						优惠券
					</view>
					<view class="coupon-box" style="color: #9A9EA9;" @click="goCoupon" v-if="!coupon_info.name">
						<view class="payment">
							未选择
						</view>
						<text class="iconfont icon-right" style="font-size: 40rpx;"></text>
					</view>
					<view class="coupon-box" style="color: #9A9EA9;" @click="goCoupon" v-else>
						<view class="payment">
							{{coupon_info.name}}
						</view>
						<text class="iconfont icon-right" style="font-size: 40rpx;"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="">
			<radio-group  @change="radioGroupChange">
				<view class="solt-wrap">
					<view class="title">支付方式</view>
					<label key="wxpay">
						<view class="pay-item  u-row-between u-border-bottom">
							<view class="u-flex">
								<image style="width: 50rpx;height: 50rpx;" src="../../static/Shop/weChat.png"></image>
								<text class="u-margin-left-15">微信支付</text>
							</view>
							<radio :value="'wxpay'" color="#FF9000" :checked="selectPay === 'wxpay'" />
						</view>
					</label>
					<label key="alipay">
						<view class="pay-item x u-row-between u-border-bottom">
							<view class="u-flex">
								<image style="width: 50rpx;height: 50rpx;" src="../../static/Shop/alipay.png"></image>
								<text class="u-margin-left-15">支付宝支付</text>
							</view>
							<radio :value="'alipay'" color="#FF9000" :checked="selectPay === 'alipay'" />
						</view>
					</label>
					<label key="wallet">
						<view class="pay-item  u-row-between u-border-bottom">
							<view class="u-flex">
								<image style="width: 50rpx;height: 50rpx;" src="../../static/Shop/wallet.png"></image>
								<text class="u-margin-left-15">余额</text>
							</view>
							<radio :value="'wallet'" color="#FF9000" :checked="selectPay === 'wallet'" />
						</view>
					</label>
				</view>
			</radio-group>	
		</view>
		<view class="bottom">
			<view class="coupon">
				优惠抵扣
				<view class="coupon-price" v-if="coupon_show">
					￥0
				</view>
				<view class="coupon_price" v-else>
					-￥{{coupon_price}}
				</view>
			</view>
			
			<view class="total-box">
				合计
				<view class="price">
					￥{{pay_price}}
				</view>
				<Btn marked="去结算" backgroundColor="#FF78AE" :width="220" :height="70" :borderRadius="32" @click.native="pay"></Btn>
			</view>
		</view>
		<Drawer mode="bottom" :visible="visible" @close="closeDrawer">
			<radio-group  @change="invoiceRadioChange">
				<view class="invoice">
					<view class="invoice-title">
					是否开具发票
					</view>
					<view class="invoice-radio">
						<label class="radio">
							<radio value="1" /><text>是</text>
						</label>
						<label class="radio">
							<radio value="0" /><text>否</text>
						</label>
					</view>
				</view>
			</radio-group>
		</Drawer>
	</view>
</template>
<script>
	import Btn from "../../components/bw-Btn/bw-btn.vue"
	import SplitLine from "../../components/bw-Split-line/bw-Split-line.vue"
	import tuiSwipeAction from "../../components/bw-swipe-action/bw-swipe-action.vue"
	import ShopCarItem from "../shop/components/bw-shopCar-Item.vue"
	import {orderConfirm,orderPay,couponDetail} from "../../api/order.js";
	import {addresseinfo} from "../../api/mine.js";
	import Drawer from "../shop/components/bw-drawer.vue";
	let providerList = []; // 支付通道
	export default{
		components:{
			Btn,
			SplitLine,
			tuiSwipeAction,
			ShopCarItem,
			Drawer
		},
		data(){
			return {
				show:true,
				shoplist:[
					
				],
				payment:"余额",
				pay_type:0,
				selectPay:"wallet",
				total_price:0,
				coupon_price:0,
				cart_ids:"",
				order_key:"",
				pay_price:0,
				address_info:{},
				address_id:"",
				order_id:"",
				coupon_id:"",
				coupon_info:{},
				coupon_show:true,
				coupon_price:0,
				providerList:[],
				visible:false,
				remark:'',
				invoiceValue:"未选择",
				choose_invoice:"",
			}
		},
		onBackPress(e){
		  console.log("监听返回按钮事件",e);
		  uni.removeStorageSync('remark')
		  uni.removeStorageSync('invoice')
			//返回
			uni.navigateTo({
				url:"/pages/TabBar/Shop/shop2"
			})
		  // 此处一定姚要return为true，否则页面不会返回到指定路径
		  return true;
		},
		onShow() {
			//获取  用户 修改的备注
			if(uni.getStorageSync('remark')!==""){
				this.remark=uni.getStorageSync('remark')
			}
			else{
				uni.removeStorageSync('remark')
			}
			console.log(this.remark)
			//获取  用户 是否开具发票
			if(uni.getStorageSync('invoice')!==""){
				this.invoiceValue=uni.getStorageSync('invoice')
			}
			else{
				uni.removeStorageSync('invoice')
			}
		},
		async onLoad(point) {
			if(!point.ids){
				//确认订单信息
				await orderConfirm({
					cart_ids:88
				}).then(res=>{
					this.shoplist=res.data.cart_info
					this.order_key=res.data.order_key
					this.shoplist.forEach(item=>{
						 this.total_price+=Number(item.total_price)
					})
					console.log(this.total_price)
					this.pay_price=this.total_price-this.coupon_price
				})
			}
			else{
				//确认订单信息
				await orderConfirm({
					cart_ids:point.ids
				}).then(res=>{
					this.shoplist=res.data.cart_info
					this.order_key=res.data.order_key
					this.shoplist.forEach(item=>{
						 this.total_price+=Number(item.total_price)
					})
					console.log(this.total_price)
					this.pay_price=this.total_price-this.coupon_price
				})
			}
			this.cart_ids=point.ids;
			//获取地址详情
			if(point.addressId){
				this.address_id=point.addressId
				await addresseinfo({
					id:this.address_id
				}).then(res=>{
					this.address_info=res.data
					this.show=false
				})
			}
			console.log(this.address_info)
			
			//获取优惠券详情
			if(point.couponId){
				this.coupon_id=point.couponId
				await couponDetail({
					id:this.coupon_id
				}).then(res=>{
					this.coupon_info=res.data
					this.coupon_show=false
					if(res.data.coupons.type==1){
						let str=Number(res.data.coupons.coupon_rate)/100*Number(this.total_price)*100
						str=str.toString().split(".")[0]
						console.log(str)
						if(str.charAt(str.length - 1)>=0&&str.charAt(str.length - 1)<5){
							this.pay_price=Math.floor(Number(res.data.coupons.coupon_rate)/100*Number(this.total_price)*100)/100
							 this.coupon_price=Math.ceil((this.total_price-this.pay_price)*100)/100
						}
						else{
							this.pay_price=Math.ceil(Number(res.data.coupons.coupon_rate)/100*Number(this.total_price)*100)/100
							this.coupon_price=Math.floor((this.total_price-this.pay_price)*100)/100
						}	
					}
					if(res.data.coupons.type==0){
						this.pay_price=Math.floor((Number(this.total_price)-Number(res.data.coupons.coupon_price))*100)/100
						this.coupon_price=Math.floor((this.total_price-this.pay_price)*100)/100
					}
				})
			}
			// 获取支付通道
			uni.getProvider({
			    service: 'payment',
			    success:  (res) => {
					console.log(res.provider)
					this.providerList = res.provider
			    }
			});
		}, 
		methods:{
			pay(){
				console.log(this.address_id)
				if(this.address_id==""){
					uni.showToast({
						title:"请选择收货地址",
						icon:"none"
					})
				}
				else{
					if(this.invoiceValue=="开具发票"){
						this.choose_invoice=1
					}
					if(this.invoiceValue=="不开具发票"){
						this.choose_invoice=0
					}
					//余额支付
					if(this.pay_type==0){
						orderPay({
							order_key:this.order_key,
							pay_type:0,
							counpon_id:this.coupon_id,
							mark:this.remark,
							is_invoice:this.choose_invoice,
							is_distribution:1,
							distribution_address_id:this.address_id
						}).then(res=>{
							this.order_id=res.data.order_no
							uni.navigateTo({
								url:'/pages/orderPay/cancelPay?order_id='+this.order_id+"&&name=circle-fill",
							})
							uni.removeStorageSync('remark')
							uni.removeStorageSync('invoice')
						}).catch(err=>{
							uni.navigateTo({
								url:'/pages/orderPay/cancelPay?order_id='+this.order_id+"&&name=close-fill",
							})
							uni.removeStorageSync('remark')
							uni.removeStorageSync('invoice')
						})
					}else{
						//第三方支付
						orderPay({
							order_key:this.order_key,
							pay_type:this.pay_type,
							// counpon_id:0,
							is_distribution:0,
							distribution_address_id:this.address_id
						}).then(res=>{
							this.order_id=res.data.order_no
							// #ifdef APP-PLUS
							// app唤起支付界面
							uni.requestPayment({
							    provider: this.selectPay,
							    orderInfo: res.data.pay_param, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
							    success:  (res) =>{
									console.log("支付成功")
									//支付成功跳转
									// console.log('fail:' + JSON.stringify(res))
									uni.navigateTo({
										url:'/pages/orderPay/cancelPay?order_id='+this.order_id+"&&name=circle-fill",
									})
									uni.removeStorageSync('remark')
									uni.removeStorageSync('invoice')
							    },
							    fail:  (err) => {
							        uni.navigateTo({
							        	url:'/pages/orderPay/cancelPay?order_id='+this.order_id+"&&name=close-fill",
							        })
									uni.removeStorageSync('remark')
									uni.removeStorageSync('invoice')
							    }
							});
							// #endif
						})
					}
				}
			},
			goCoupon(){
				uni.navigateTo({
					url:"/pages/shop/coupon2?ids="+this.cart_ids+"&&addressId="+this.address_id+"&&pay_price="+this.total_price
				})
			},
			Address(){
				uni.navigateTo({
					url:"/pages/Mine/address/index?ids="+this.cart_ids+"&&couponId="+this.coupon_id
				})
			},
			radioGroupChange(e) {
				this.selectPay = e.detail.value;
				console.log(this.selectPay)
				if(e.detail.value=="wxpay"){
					this.payment="微信"
					this.pay_type=1
				}
				if(e.detail.value=="alipay"){
					this.payment="支付宝"
					this.pay_type=2
				}
				if(e.detail.value=="wallet"){
					this.payment="余额"
					this.pay_type=0
				}
				
			},
			payBtn(){
				this.visible=false
			},
			//遮罩点击事件，关闭抽屉
			closeDrawer(){
				this.visible=false
			},
			invoiceRadioChange(e){
				this.visible=false
				console.log(e)
				if(e.detail.value=="1"){
					this.invoiceValue="开具发票"
				}
				else{
					this.invoiceValue="不开具发票"
				}
				uni.setStorageSync('invoice', this.invoiceValue)
			},
			//添加备注
			goRemark(){
				uni.navigateTo({
					url:"/pages/orderPay/remark"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../iconfont.scss";
	.invoice{
		height: 300rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		.invoice-title{
			font-size: 36rpx;
			font-weight: 500;
		}
		.invoice-radio{
			width: 80%;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
	}
	.scroll{
		background-color: #FFFFFF;
		padding: 20rpx;
	}
	/deep/ uni-scroll-view{
		width: auto;
	}
	.address-box{
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 40rpx;
		.address{
			display: flex;
			justify-content: center;
			align-items: center;
			.address-title{
				font-size: 32rpx;
				font-weight: bolder;
			}
			.address-name{
				display: flex;
				font-weight: bolder;
				margin-bottom: 10rpx;
			}
		}
	}
	.title{
		height: 100rpx;
		line-height: 100rpx;
		font-size: 34rpx;
		font-weight: bolder;
	}
	.discount-info{
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;
		padding: 20rpx;
		margin-top: 20rpx;
		.content{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 600;
			color: #171E3A;
			padding: 10rpx 0rpx;
			.coupon-box{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
		.total{
			font-weight: bolder;
			margin-top: 20rpx;
		}
	}
	.bottom{
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		border-top: 1px solid #D1D1D3;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		position: fixed;
		bottom: 0px;
		left: 0px;
		.coupon{
			display: flex;
			justify-content: space-around;
			align-items: center;
			color: #9A9EA9;
			font-size: 28rpx;
			.coupon-price{
				margin-left: 10rpx;
				color: #FD1470;
			}
		}
		.total-box{
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-weight: bolder;
			.price{
				font-size: 30rpx;
				margin: 0 20rpx;
				color: #FD1470;
			}
		}
	}
	.solt-wrap {
		background-color: #FFFFFF;
		padding: 20rpx;
		margin-top: 20rpx;
		.title {
			font-size: 32rpx;
			font-weight: bolder;
			padding-bottom: 15rpx;
		}
		.pay-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 10rpx;
		}
	}
	.u-flex{
		display: flex;
		justify-content: flex-start;
		.u-margin-left-15{
			margin-left: 30rpx;
		}
	}
</style>
